function Passion() {

    // public
    this.title = "激情";
    this.divId = "passion";
    this.hide = function() {
        getElement(self.divId).style.display="none";
    };
    this.unhide = function() {
        getElement(self.divId).style.display="block";
        init();
    };

    // private
    var self = this;
    var playerId = "audioplayer";
    var iconClass = "icon";
    var trackIndex = 0;
    var trackUrls = ["passion/lifelikes.m4a",
                      "passion/ariver.m4a",
                      "passion/sometimessilence.m4a",
                      "passion/sometimescrazy.m4a",
                      "passion/flyhigh.m4a"];
    var player;

    function getElement(id) {
        return document.getElementById(id);
    }

    // Interact Begin
    function playnext() {
        player.pause();
        trackIndex++;
        if (trackIndex >= trackUrls.length) {
            trackIndex = 0;
        }
        player.src = trackUrls[trackIndex];
        player.play();
    }

    // Interacting
    function interacting() {
        if (!isPeekMode) {
            drawOnThePoint(window.innerWidth * 0.05);
        }
    }

    // Interact End
    function interactEnd() {
        if (peekID > 0) {
            window.clearInterval(peekID);
            peekID = 0;
        }
        if (isPeekMode) {
            // Need to recovert the mask
            drawImage();
        }
    }


    // ---------- Mouse event ----------
    function handleMouseEnter(event) {
        event.preventDefault();
        point = { x: event.clientX - mask.offsetLeft,
                y: event.clientY - mask.offsetTop};
        interactBegin();
    }

    function handleMouseMove(event) {
        event.preventDefault();
        point = { x: event.clientX - mask.offsetLeft,
                y: event.clientY - mask.offsetTop};
        interacting();
    }

    function handleMouseOut(event) {
        event.preventDefault();
        interactEnd();
    }

    function handleMouseClick(evnet) {
        playnext();
    }
    // ---------- Mouse event ----------



    // ---------- Touch event ----------
    function handleTouchStart(event) {
        event.preventDefault();
        point = { x: event.changedTouches[0].clientX - mask.offsetLeft,
                y: event.changedTouches[0].clientY - mask.offsetTop};
        interactBegin();
    }

    function handleTouchMove(event) {
        event.preventDefault();
        point = { x: event.changedTouches[0].clientX - mask.offsetLeft,
                y: event.changedTouches[0].clientY - mask.offsetTop};
        if (!isPeekMode) {
            // Peek is already draw in the interval
            drawOnThePoint(point);
        }
        interacting();
    }

    function handleTouchEnd(event) {
        event.preventDefault();
        interactEnd();
    }
    // ---------- Touch event ----------

    function init() {
        player = getElement(playerId);
        Array.from(document.getElementsByClassName(iconClass)).forEach(function(icon) {
            icon.addEventListener("click", handleMouseClick, false);
        }, this);
    }
}